<template>
  <div :class="'cp-class-ls '+bgClass" v-show="show">
    <!--顶部-->
    <ul :class="'cp-class-ls-top-ul'+(type==1?' box-shadow':'') ">
      <li v-for="(item,index) in topList" :class="topListClass + (index==0?'-selected':'')"
          @click="chooseTopClass(item,$event.currentTarget)">
        <div v-if="item.classType !=2">
          {{item.name}}
        </div>
        <div v-else-if="item.classType ==2">
          <div class="title">
            {{item.value.title}}
          </div>
          <div class="pl">
            {{item.value.pl}}
          </div>
          <div class="nums">
            <div v-for="num in item.value.nums" :class="'sz sz-nm sz-'+num">
            </div>
          </div>
        </div>
      </li>
    </ul>

      <!--内容部分-->
    <ul class="cp-class-ls-content-ul-3"  v-if="type==3">

      <div class="line-type">
        <div>玩法选择</div>
      </div>
      <li v-for="(sub,index) in subClasses.children">
        <div v-if="!sub.isParent" :class="'sub-class-1 '+(index==0?'sub-class-selected':'')"  @click="selectSubClass(sub,$event.currentTarget)">
          {{sub.name}}
        </div>
      </li>
    </ul>
    <!--3 层-->
    <ul class="cp-class-ls-content-ul-1"  v-if="type==1">
      <li v-for="(sub,subIndex) in subClasses.children">
        <div class="sub-class">
          {{sub.name}}
        </div>
        <div class="last-class">
          <span v-for="(sec,index) in sub.children" :class="'sub-class-1 '+(index==0&&subIndex==0?'sub-class-selected':'')" @click="selectSubClass(sec,$event.currentTarget)">
            {{sec.name}}
          </span>
        </div>
      </li>
    </ul>

  </div>
</template>
<script>
  export default {
    name: "cp-classes-ul",
    props: {
      classList: {
        type: [Array, Object],
        default: []
      },
      show:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        hasSub: false,
        chosenTopClass: {},
        hasSecondClass:false,
        type:1,
        deliveryData:{}
      }
    },
    methods: {
      init() {
        var data = this.classList[0];
        //获取选择的子类
        if(this.getTopClassType()===1){//第3个节点
          this.setDeliveryData(data.children[0].children[0]);
        }else if (this.getTopClassType()===2){//父节点
          this.setDeliveryData(data);
        }else if (this.getTopClassType()===3){//2节点
          this.setDeliveryData(data.children[0]);
        }
        this.renderChildren(data);
      },
      /**
       * 渲染子节点
       * @param data
       */
      renderChildren(data) {
        this.type = this.classList[0].classType;
        //先判断type
        if (this.getTopClassType() === 2) {
          this.hasSub = false;
        }
        if (this.getTopClassType() === 1) {
          this.hasSub = true;
        }
        this.chosenTopClass = data;
        //判断层级,目前最高2层
        if (data.isParent) {
          if(data.children[0].isParent){
            this.hasSecondClass = true;
          }
        }
      },
      /**
       * 向父节点传输数据
       * @param data
       */
      setDeliveryData(data){
        this.$emit("select-one-class",data);
      },
      getTopClassType() {
        return this.classList[0].classType;
      },
      chooseTopClass (data, obj) {
        let chosenClass;
        if (this.getTopClassType() === 1) {//第3个节点
          chosenClass = "ssc-top-class-selected";
        } else if (this.getTopClassType() === 2) {//父节点
          chosenClass = "k3-class-selected";
          this.setDeliveryData(data);
        } else if (this.getTopClassType() === 3) {//第二个节点
          chosenClass = "ssc-top-class-selected";
        }
        $(obj).parent().children().removeClass(chosenClass);
        $(obj).addClass(chosenClass);
        this.renderChildren(data);
      },
      selectSubClass(data,obj){
        let chosenClass = "sub-class-selected";
        $(".sub-class-1").removeClass(chosenClass);
        $(obj).addClass(chosenClass);
        this.setDeliveryData(data);
      }
    },
    computed: {
      topList: {
        get: function () {
          return this.classList;
        },
        set: function () {

        },
      },
      // 仅读取
      topListClass() {
        if (this.getTopClassType() === 2) {
          return "top-class-2 k3-class";
        }
        return "top-class-1 ssc-top-class";
      },
      subClasses: {
        set: function () {
          return this.chosenTopClass;
        },
        get: function () {
          return this.chosenTopClass;
        }
      },
      bgClass(){
        return "bg-" + this.getTopClassType();
      }
    },
    mounted() {
      this.init()
    }
  }

</script>

<style scoped>
  @import "../../css/sz.css";
  .bg-1 {
    background-color: #ffffff;
  }
  .sub-class-selected{
    border: 1px solid #dc3b40!important;
    color: #dc3b40!important;
  }
  .cp-class-ls {

  }
  .box-shadow{
    box-shadow: 0 2px 10px rgba(41,41,41,.08);
  }

  .cp-class-ls-content-ul-3 {
    margin-top: 1em;
    position: relative;
  }

  .cp-class-ls-content-ul-3 li {
    /*margin-left: 1em;*/
    display: inline-block;
    /*width: 100%;*/
  }
  .cp-class-ls-content-ul-1 .sub-class{
    border: 1px solid transparent;
    color: #666;
    /*width: 4.5em;*/
    height: 2em;
    /*float: left;*/
    line-height: 2em;
    font-size: .7em;
    position: relative;
    padding: .3rem 0;
    margin-left: 1.4em;
    margin-right: 1em;
    display: inline-block;
  }

  .cp-class-ls-content-ul-1 .last-class{
    vertical-align: top;
    display: inline-block;
    width:5.7rem;
    /*float: left;*/
    padding: .2rem 0;
    border-bottom: solid #ddd 1px;
  }
  .cp-class-ls-content-ul-1 li:last-child .last-class{
    border-bottom: none;
  }


  .cp-class-ls-top-ul{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  .line-type {
    width: 100%;
    position: absolute;
    top: -.5em;
    height: 1em;
    font-size: .5em;
    line-height: .5em;
    z-index: 3;
    margin-left: -.4em;
    text-align: center;
    padding: 0;
  }
  .line-type:before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: .45em;
    background-image: -webkit-linear-gradient(90deg,#dfdfdf,#dfdfdf 50%,transparent 0);
  }
  .line-type div {
    color: #999;
    margin: 0 auto;
    float: none;
    width: 6.4em !important;
    padding: 0;
    display: block;
    height: 1em;
    line-height: 1em;
    background: #ffffff;
    position: relative;

  }
  .line-type div:after{
    position: absolute;
    top: .2em;
    left: -0.4em;
    content: "";
    display: block;
    height: .5em;
    width: .5em;
    border-radius: 50%;
    background: #dfdfdf;
  }
  .line-type div:before{
    position: absolute;
    top: .2em;
    left: 6.1em;
    content: "";
    display: block;
    height: .5em;
    width: .5em;
    border-radius: 50%;
    background: #dfdfdf;
  }
  .content-class-ul-1 {
    line-height: 2em;
    cursor: pointer;
    text-align: center;
    color: #555;
    font-size: 1.2em;
    /*margin: 0 0.5em;*/
    margin-right: 0.8em;
    border-radius: 0.3em;
    border: 1px solid #ddd;
    padding: 0 1em;
  }
  .sub-class-1{
    line-height: 2em;
    cursor: pointer;
    text-align: center;
    color: #555;
    font-size: 1.2em;
    margin: 0.3em;
    border-radius: 0.3em;
    border: 1px solid #ddd;
    padding: 0 0.9em;
    display: inline-block;
  }
  .top-class-1{
    line-height: 2em;
    cursor: pointer;
    text-align: center;
    color: #555;
    font-size: 1.2em;
    margin: 0.5em;
    border-radius: 0.3em;
    border: 1px solid #ddd;
    padding: 0 1em;
    display: inline-block;
  }

  .top-class-2 {
    width: 31%;
    text-align: center;
    margin: 0.3em;
    margin-left: 0.4em;
    padding: 0.6em;
    border: 1px solid #ddd;
    border-radius: 0.5em;
    display: inline-block;
  }

  .top-class-2 .title {
    font-size: 1.5em;
  }

  .top-class-2 .pl {
    color: #0bb20c;
    padding: 0.5em;
  }

  .top-class-2 .nums {
    color: #666;
    padding: 0.4em;
  }

  .k3-class-selected {
    border-color: #f4c829;
  }

  .ssc-top-class-selected {
    background: #dc3b40;
    border: 1px solid #dc3b40;
    color: #fff;
  }

  .ssc-child-class-selected {
    border: 1px solid #dc3b40;
    color: #dc3b40;
  }


</style>
